<!DOCTYPE html>
<html lang="en">
<head>

       <!-- 引入 echarts.js -->
       <script src="http://pic.beeboom.net/sourse/echarts.min.js"></script>
       <!-- 引入主题 -->
       <script src="http://pic.beeboom.net/sourse/wonderland.js"></script>
       
       

       <!-- element-ui css-->
       <link rel="stylesheet" href="http://pic.beeboom.net/sourse/element-ui@2.15.7/lib/theme-chalk/index.min.css">

       <!-- vue -->
       <script src="http://pic.beeboom.net/sourse/vue.min.js"></script>
       
        <!-- element-ui js-->
        <script src="http://pic.beeboom.net/sourse/element-ui@2.15.7_lib_index.min.js"></script>

       <!-- 引入axios -->
       <script src="http://pic.beeboom.net/sourse/axios_0.26.0_axios.min.js"></script>

        <!-- 引入xlsx -->
        <script src="http://pic.beeboom.net/sourse/xlsx.full.min.js"></script>
        <script src="http://pic.beeboom.net/sourse/FileSaver.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta http-equiv="refresh" content="120"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,  minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
    <title>监控页面</title>
    <!-- <style>
        #app{
            margin: 0 auto; 
            text-align: center
        }
    </style> -->
</head>
<body>   
    <div id="app"> 
      <el-container>
        <el-header style="height: 100px;padding:0">
          <el-row>
            <el-col :span="20">
              <div style="padding-left: 5px;"><span style="font-size:30px">{{monitor_title}}</span></div>
            </el-col>
            <el-col :span="4"> 
              <el-button style="float: right; padding: 3px; margin-right: 5px" type="danger"  icon  = "el-icon-user-solid" circle @click="logout"></el-button>
              <em style="float: right; padding: 1px; margin-right: 5px">{{user}}</em>  
            </el-col>
          </el-row>
          <div style="padding-top:10px">
            <el-row>
              <el-col :span="24">
                <el-menu
                  mode="horizontal"
                  :default-active="activeIndex"
                  @select="handleSelect"
                  background-color="#545c64"
                  text-color="#fff"
                  active-text-color="#ffd04b"
                >
                  <el-menu-item v-for="item in menuItems" :key="item.index" :index="item.index" style="width:150px;text-align:center">
                    <span v-if="!item.children"><i :class="item.icon||'el-icon-menu'"></i>{{ item.label }}</span>
                    <el-submenu v-if="item.children" :index="item.index" style="width:150px;text-align:center" @click.native.stop>
                      <template #title ><i :class="item.icon ||'el-icon-menu'"></i>{{ item.label }}</template>
                      <el-menu-item v-for="subItem in item.children" :key="subItem.index" :index="subItem.index">
                        <i :class="subItem.icon ||'el-icon-menu'"></i>{{ subItem.label }}
                      </el-menu-item>
                    </el-submenu>
                  </el-menu-item>
                </el-menu>
              </el-col>
            </el-row>  
          </div>
        </el-header>
        <el-main>
          <div class="hit-the-floor">404</div>
        </el-main>
      </el-container>
       


    </div>
</body>
</html>

<script>

const vm = new Vue({
    el: '#app', 
    data() {
        return {
          monitor_title:"重点能耗设备用能监控系统",
          activeIndex:'',
          date1:'',
          date2:'',
          userInfo:'',
          user:'',
          parkID:'',
          meterCount:'',
          combinedMeterData:'',
          configSet: [],
          meterStatus: [],
          gatewayCount:'',
          unregisteredMeterList:'',
          unregisteredMeterCount:'',
          faultyMeterCount:'',
          faultyMeterList: '',
          gatewayData:'',
          uploadedData: [], // 存储上传的 Excel 数据
          currentTime: '',
          menuItems: []
      }
  },
  mounted() {
    console.log('monitor mounted')
    const token = localStorage.getItem("token");
    const menu = localStorage.getItem("menu");
    console.log(menu)
    this.menuItems = JSON.parse(menu)
    // const mark = localStorage.getItem("mark");
    // this.monitor_title = mark
    let a=token.split('.')
    console.log(atob(a[1]))
    // this.userInfo=atob(a[1])
  
    let user=JSON.parse(atob(a[1])).username
    // console.log(user)
    // console.log(mark)
    this.user=user
    
    setInterval(() => {
      this.currentTime = new Date().toLocaleTimeString();
    }, 1000);
  },
  //页面关闭
  beforeDestroy() {
    
  },
  methods: {
  //页面跳转处理
  handleSelect(key, keyPath){
      // console.log(key);
      // console.log(keyPath);
        // 如果路径存在，跳转到对应路径
        let currentPath = window.location.href;
        let currentPathArray = currentPath.split('/');
        currentPathArray[currentPathArray.length - 1] = key;
        let newPath = currentPathArray.join('/');
        if (newPath.includes('localhost')) {
          newPath = newPath + '.html';
        }
        // window.location.href = newPath;
       // 检查路径是否存在
       navigateToPage(newPath)

      function navigateToPage(url) {
        // console.log('navigateToPage')
        // console.log(url)  
        fetch(url)
        .then(response => {
            if (response.ok) {
                // console.log('response.ok')
                // 如果页面可访问，跳转到目标页面
                window.location.href = url;
            } else {
              // console.log('response.not ok')
              let currentPathArray = url.split('/');
              currentPathArray[currentPathArray.length-1] = '404';
              let newPath = currentPathArray.join('/');
              // window.location.href = newPath;
              // console.log(newPath)
              // 如果页面不可访问，跳转到404页面
              if(url.includes('localhost')){
                //url最后添加.html
                newPath = newPath + '.html';
              }
              // console.log(newPath)
              window.location.href = newPath;
            }
        })
        .catch(error => {
            console.log('error')
            // 如果请求失败（例如网络问题），也跳转到404页面
            console.error("Error fetching the page:", error);
              // 如果页面不可访问，跳转到404页面

        });
      }
    },

  //登出
    logout(){
    this.$confirm('确认登出?', '登出', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          callback: action => {
            this.$message({
              type: 'info',
              message: `Logout: ${ action }`,
              customClass: 'winClass',
              center: true
            });
            if(action =='confirm'){
                localStorage.clear();
                //清除页面数据
                this.meterStatus = [];
                this.combinedMeterData = [];
                this.configSet = [];
                this.gatewayCount = 0;
                this.meterCount = 0;
                this.faultyMeterCount = 0;
                this.unregisteredMeterCount = 0;
                localStorage.clear();
                //跳转到登录页面,url最后一级别替换为login，如果是本地文件路径在后面添加.html
                let currentPath = window.location.href;
                let currentPathArray = currentPath.split('/');
                currentPathArray[currentPathArray.length-1] = 'login';
                let newPath = currentPathArray.join('/');
                if(newPath.includes('file://')){
                  newPath = newPath + '.html';
                }
                setTimeout("window.location.href='"+newPath+"'",1000);
            }
          }
        });
  },

}   
})
</script>
<style>
.hit-the-floor {
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-size: 12em;
  font-weight: bold;
  font-family: Helvetica;
  text-shadow: 
    0 1px 0 #ccc, 
    0 2px 0 #c9c9c9, 
    0 3px 0 #bbb, 
    0 4px 0 #b9b9b9, 
    0 5px 0 #aaa, 
    0 6px 1px rgba(0,0,0,.1), 
    0 0 5px rgba(0,0,0,.1), 
    0 1px 3px rgba(0,0,0,.3), 
    0 3px 5px rgba(0,0,0,.2), 
    0 5px 10px rgba(0,0,0,.25), 
    0 10px 10px rgba(0,0,0,.2), 
    0 20px 20px rgba(0,0,0,.15);
}

.hit-the-floor {
  text-align: center;
}

body {
  background-color: #f1f1f1;
}
    /* 增加菜单项的内边距 */
    .el-menu-item {
       text-align: center;
       cursor: pointer;
       padding: 0;
    }

    /* 调整下拉箭头的位置 */
    .el-submenu__title {
        align-items: center; /* 垂直居中对齐 */
        padding: 0;
    }
</style>